<!DOCTYPE html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
  <script type="module" src="../../polymer-element.js"></script>
</head>
<body>
  <script type="module">
import { PolymerElement } from '../../polymer-element.js';
import { html } from '../../lib/utils/html-tag.js';

class SuperClass extends PolymerElement {
  static get is() {return 'super-class';}
  static get template() {
    return html`
      <style>#name {color: red}</style>
      <h3 id="name">${this.is}</h3>
      <div>${this.headerTemplate}</div>
      [[myProp.stuffThatGoesHere]]
      <div>${this.footerTemplate}</div>
    `;
  }
  static get headerTemplate() { return html`<h1>Header</h1>`; }
  static get footerTemplate() { return html`<h1>Footer</h1>`; }
}
customElements.define(SuperClass.is, SuperClass);
class SubClass extends SuperClass {
  static get is() {return 'sub-class';}
  static get template() {
    return html`
      <style>.frame {font-style: italic}</style>
      <div class="frame">${super.template}</div>
      <div>\</div>
    `;
  }
  constructor() {
    super();
    this.myProp = {stuffThatGoesHere: '!stuff that goes here!'};
  }
  static get headerTemplate() { return html`<h2>Sub-header</h2>`; }
  static get footerTemplate() { return html`<h2>Sub-footer</h2>`; }
}
customElements.define(SubClass.is, SubClass);
</script>
  <script type="module">
import { PolymerElement } from '../../polymer-element.js';
class XString extends PolymerElement {
  static get is() {return 'x-string'};
  static get template() {
    return 'string template!';
  }
}
customElements.define(XString.is, XString);
</script>
  <super-class></super-class>
  <sub-class></sub-class>
  <x-string></x-string>
</body>
